<template>
    <div>
        <div class="userImg">
            <div>头像</div>
            <van-uploader :max-count="1" :after-read="afterRead"><img :src="buddha" alt=""></van-uploader>
        </div>
        <van-field v-model="username" label="用户昵称" />
        <!-- <van-field v-model="sex" label="性别" /> -->
        <div style="display: flex;align-items: center;justify-content: space-around;">
            <div>性别:</div>
            <van-dropdown-menu style="width: 70vw;">
                <van-dropdown-item v-model="value" :options="option" />
            </van-dropdown-menu>
        </div>
        <van-field v-model="school" label="所属学校" />
        <van-field v-model="name" label="真实姓名" />
        <van-field v-model="qq" label="QQ" />
        <van-field v-model="wx" label="微信" />
        <van-field v-model="phone" label="手机号" />
        <van-field v-model="birthday" label="生日" placeholder="如 19970618" />
        <van-button @click="upData(uid, username, value, school, name, qq, wx, phone, birthday)"
            style="width: 90%;margin: 0 5%;position: absolute;bottom: 40px;" round type="info">修改信息</van-button>
        <van-button @click="back" style="width: 90%;margin: 0 5%;position: absolute;bottom: 100px;" round
            type="default">返回</van-button>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { getUserAPI, updataUserAPI, upDataimgAPI } from '../api/API'
export default {
    name: 'More',
    data() {
        return {
            username: "",
            // sex: "",
            school: "",
            name: "",
            qq: "",
            wx: "",
            phone: "",
            birthday: "",
            uid: "",
            buddha: "",
            value: '',
            option: [
                { text: '男', value: 0 },
                { text: '女', value: 1 },
            ],
        }
    },
    methods: {
        // 修改资料
        upData(uid, username, value, school, name, qq, wx, phone, birthday) {
            updataUserAPI(uid, username, value, school, name, qq, wx, phone, birthday).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    Toast.success('修改成功!');
                    this.$router.push('/user')
                }
            }).catch(() => {
                Notify({ type: 'warning', message: '修改失败-请查看格式是否错误' });
            })
        },
        // 返回user
        back() {
            this.$router.push('/user')
        },
        // 上传图片
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            // console.log(file);
            upDataimgAPI(file.file, this.uid).then((res) => {
                console.log(res);
                getUserAPI(localStorage.getItem('userID')).then((res) => {
                    this.buddha = res.data.date[0].buddha
                })
            })
        }
    },
    mounted() {
        this.uid = localStorage.getItem('userID')
        getUserAPI(localStorage.getItem('userID')).then((res) => {
            console.log(res.data.date[0]);
            this.username = res.data.date[0].username
            this.value = res.data.date[0].sex
            this.school = res.data.date[0].school
            this.name = res.data.date[0].name
            this.qq = res.data.date[0].QQ
            this.wx = res.data.date[0].wx
            this.phone = res.data.date[0].phone
            this.birthday = res.data.date[0].birthday
            this.buddha = res.data.date[0].buddha
        })
    }
}
</script>

<style scoped>
.userImg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    font-size: 20px;
    line-height: 80px;
    height: 80px;
    border-bottom: 1px solid #ccc;
}

.userImg img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin: 40px 20px 0 20px;
}
</style>